<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<title>Title</title>
	<style>
		select {
			width: 150px;
			background-color: #0099cc;
		}
	</style>
</head>

<body>
	<select id="all" size="10" multiple="multiple">
			<option>苹果</option>
			<option>香蕉</option>
			<option>西瓜</option>
			<option>牛油果</option>
			<option>西红柿</option>
		</select>
	<input type="button" value=">>" id="btn1">
	<input type="button" value="<<" id="btn2">
	<input type="button" value=">" id="btn3">
	<input type="button" value="<" id="btn4">

	<select id="select" size="10" multiple="multiple">
		</select>

	<script src="common.js"></script>
	<script>
			//获取全部水果
			var all = my$("all");
			//已选择的水果
			var select = my$("select");
			//把all中选择的option移动到select中
			var btn3 = my$("btn3");
			btn3.onclick = function() {
				//获取all所有选中的项
				moveSelect(all, select);
			}

			//把select中选择的option移动到all中
			var btn4 = my$("btn4");
			btn4.onclick = function() {
				//获取all所有选中的项
				moveSelect(select, all);
			}

			//把选中项移动到dest的下拉框中
			function moveSelect(src, dest) {
				for(var i = 0; i < src.children.length; i++) {
					var option = src.children[i];
					//判断是否选中
					if(option.selected) {
						dest.appendChild(option);
						i--;
					}
				}
			}

			//全选
			var btn1 = my$("btn1");
			btn1.onclick = function() {
				moveAll(all, select);
			}

			//取消全选
			var btn2 = my$("btn2");
			btn2.onclick = function() {
				moveAll(select, all);
			}

			//移动所有项
			//src 源下拉框  从哪获取option
			//dest  目标下拉框 移动到哪
			function moveAll(src, dest) {
				//
				var array = [];
				for(var i = src.children.length - 1; i >= 0; i--) {
					var option = src.children[i];
					array.push(option);
				}

				//翻转数组
				array.reverse();
				for(var i = 0; i < array.length; i++) {

					dest.appendChild(array[i]);
				}
			}
		</script>
</body>

</html>